<template>
	<view>
	<view class="cont">
	<image :src="details.Image" mode=""/>
	<view class="name">{{details.name}}</view>
	</view>
	<view class="sort"><view class="text">{{details.sort}}</view></view>
	<view class="jianjie">
	简介：{{details.title}}
	</view>
	<view class="zuoz">
	作者：{{details.auther}}
	</view>
	<view class="button">
	<view class="dijz">第一话</view>
	<view class="ksyd">开始阅读</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goods:[],
				details: {
				      title: '',
				      name:'',
				      rank: '',
				      sort: '',
				      Image: '',
				      auther: ''
				      },
			}
		},
		onLoad(e) {
			uni.request({
				
				url:"http://localhost:3000/tab",
				data:{
					"page":e.page
				}
			}).then((res) => {
				this.goods = res.data[0].data
				this.details=this.goods[e.id-1]
			})
			
			 
		},
		methods: {
			
		}
	}
</script>

<style>
.cont{
    position: relative;
    width: 100%;
    height: 476rpx;
}
.cont image{
    width: 100%;
    height: 100%;
}
.name{
    position: absolute;
    bottom: 20rpx;
    left: 20rpx;
    font-size: 48rpx;
    color: #fff;
}
.sort{
    display: flex;    
}
.sort .text{
    background-color: #eee;
    font-size: 26rpx;
    border-radius: 30rpx;
    padding: 10rpx;
}
.jianjie{
    font-size: 26rpx;
}
.zuoz{
    margin-top: 20rpx;
    font-size: 26rpx;
}
.button{
    width: 100%;
    height: 80rpx;
    display: flex;
    text-align: center;
    justify-content: space-between; 
    border-top: 1px solid #eee;
    position: absolute;
    bottom: 0;
}
.dijz{
    margin: 10rpx;
    color: #999;
}
.ksyd{
    padding: 10rpx 20rpx;
background-color: #ff0;
}
</style>
